<!-- 人事管理页 -->
<template>
  <el-card style="margin: 20px;height:100%;">
    <el-form :inline="true">
      <el-form-item label="会议室名称" style="width: 270px;">
        <el-input placeholder="请输入会议室名称"
                  v-model="searchUserForm.meetingRoom" @keydown.enter="loadUser" >
        </el-input>
        <el-input v-show="false"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadUser">搜索</el-button>
      </el-form-item>
      <hr>
      <el-button type="primary" style="float:left;margin-top:10px;"
                 @click="beforeAddUser">➕ 新增会议室</el-button>
    </el-form>
    <el-table :data="userArr">
      <el-table-column label="会议室名称" prop="meetingRoom" align="center"></el-table-column>
      <el-table-column label="容纳人数" prop="meetingNumber" align="center"></el-table-column>
      <el-table-column label="会议室地址" prop="meetingSite" align="center"></el-table-column>
      <el-table-column label="管理员" prop="admin" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="deleteGeo(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    -->
    <el-dialog
        :title="dialogTitle"
        style="width: 1000px;padding:40px;" v-model="dialogVisible" :before-close="handleClose">
      <el-form label-width="80px" label-position="top">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="会议室名">
              <el-input placeholder="请输入"
                        v-model="saveUserForm.meetingRoom"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="容纳人数">
              <el-input placeholder="请输入" v-model="saveUserForm.meetingNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="会议室地址">
              <el-input placeholder="请输入" v-model="saveUserForm.meetingSite"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理员">
              <el-select placeholder="请输选择" v-model="saveUserForm.admin">
                <el-option border label="孙雪" value="孙雪"></el-option>
                <el-option border label="张静" value="张静"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="saveUser">保存</el-button>
      </template>
      </el-dialog>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const dialogVisible = ref(false);
const handleClose = () => {
  if(confirm('您是否要关闭本弹窗?')){
    saveUserForm.value = {};
    dialogVisible.value = false;
  }
}
const saveUserForm = ref({admin:'',meetingRoom:'',meetingNumber:'',meetingSite:''});

//定义重置搜索的方法
const resetSearch = () => {
  searchUserForm.value = {};
  loadUser();
}
//定义查询会议室方法
const loadUser = ()=>{
  let data = qs.stringify(searchUserForm.value);
  axios.get(BASE_URL+'/v1/meeting/load?'+data)
      .then((response)=>{
        if (response.data.code == 2000) {
          userArr.value = response.data.data;
          console.log(userArr.value);
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}

onMounted(() => {
  loadUser();
})

const searchUserForm = ref({meetingRoom:''});
const userArr = ref([]);
const beforeAddUser = ()=>{
  dialogTitle.value = '新增会议室';
  dialogVisible.value = true;
};
//保存会议室的方法
const saveUser = () => {
  console.log(typeof saveUserForm.value.admin)
  console.log(typeof saveUserForm.value.meetingNumber)
  console.log(typeof saveUserForm.value.meetingRoom)
  console.log(typeof saveUserForm.value.meetingSite)
  let data = qs.stringify(saveUserForm.value);
  console.log(saveUserForm.value);

  console.log(data);
  axios.post(BASE_URL+'/v1/meeting/save',data)
      .then((response)=>{
        if (response.data.code == 2000) {
          ElMessage.success('保存成功!');
          dialogVisible.value = false;//关闭弹窗
          saveUserForm.value = {};//清空表单
          loadUser();//新增成功后,需要重新加载数据!
        } else {
          ElMessage.error('保存失败!');
        }
      })
}
const dialogTitle = ref('增加会议室');
const deleteGeo = (id)=>{
  if(confirm('您确认要删除此会议室吗?')){
    axios.post(BASE_URL+'/v1/meeting/delete/'+id).then((response)=>{
      if(response.data.code == 2000){
        ElMessage.success('删除成功!');
        loadUser();
      }else{
        ElMessage.error(response.data.msg);
      }
    })
  }
};
</script>

<style>

</style>